<template>
  <div class="app-container" ref="content">
    <el-row :gutter="10">
      <el-col :span="12" :offset="6">
        <div style="text-align: center;padding: 10px">《{{alarmRecordInfo.title}}》-详情信息</div>
        <el-form :model="alarmRecordInfo" ref="fireInfoInfo" label-width="100px">
          <div style="width: 100%;height: 400px;margin-bottom: 40px">
            <video :src="alarmRecordInfo.videoUrl"  width="100%" height="400px" controls autoplay></video>
            <div style="text-align: center">
              报警视频
            </div>
          </div>
          <div style="text-align: center" v-if="alarmRecordInfo.handleStatus==0">
            <el-button type="danger" @click="dialogVisible=true">确认火情</el-button>
            <el-button type="warning" @click="misstateFire">误报火情</el-button>
          </div>
          <el-dialog
              title="温馨提示《演练模式》"
              :visible.sync="dialogVisible"
              width="30%">
            <div style="text-align: center;margin-bottom: 20px">
              请选择视频中火情发生区域进行火情通知
            </div>
            <el-form :model="fireForm" label-width="100px" ref="fireForm" :rules="fireFormRules">
              <el-form-item label="着火区域" prop="regionId" required>
                <el-select v-model="fireForm.regionId" placeholder="请选择着火区域" style="width: 100%">
                  <el-option
                      v-for="item in regionList"
                      :key="item.ucId"
                      :label="item.name"
                      :value="item.ucId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div style="text-align: right">
              <el-button type="warning" @click="dialogVisible=false">取消</el-button>
              <el-button type="danger" @click="confirmFire">确认</el-button>
            </div>
          </el-dialog>
          <el-form-item label="报警名称:" prop="title">
            {{ alarmRecordInfo.title }}
          </el-form-item>
          <el-form-item label="上报人:" prop="reportPersonName">
            {{ alarmRecordInfo.reportPersonName}}
          </el-form-item>
          <el-form-item label="上报时间:" prop="reportTime">
            {{ alarmRecordInfo.reportTime |dateFormat }}
          </el-form-item>
          <el-form-item label="关联区域" prop="regionName">
            {{ alarmRecordInfo.regionName ||"暂无区域关联"}}
          </el-form-item>
          <el-form-item label="处理状态:" prop="handleStatus">
            {{ alarmRecordInfo.handleStatus|alarmStatus }}
          </el-form-item>
          <el-form-item label="处理意见:" prop="handleOpinion">
            {{ alarmRecordInfo.handleOpinion }}
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {confirmFire, getInAlarmRecordVo, misstateFire} from "@/api/alarmRecord";
import {getRegionList} from "@/api/enterprise";

export default {
  name: "alarmRecordInfo",
  data(){
    return{
      alarmRecordInfo:{},
      regionList:[],
      dialogVisible:false,
      fireForm:{
        id:0,
        regionId:''
      },
      fireFormRules:{
        regionId: [{required: true, message: '火情区域不能为空', trigger: 'change'}],
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getInAlarmRecordVo(this.$route.params.ucId)
    });
    this.getRegionList()
  },
  methods:{
    getInAlarmRecordVo(val){
      //获取火情信息数据
      let loadingInstance = this.$loading({
        target:this.$refs.content,
        text:'数据加载中'
      });
      getInAlarmRecordVo({ucId:val}).then(res=>{
        console.log(res)
        this.alarmRecordInfo = res.data
        this.fireForm.id = res.data.id
        this.fireForm.ucId = res.data.ucId
        loadingInstance.close()
        this.$notify.success({
          title: '成功',
          message: "获取报警记录信息成功"
        })
      }).catch(error=>{
        console.log(error)
        loadingInstance.close()
        this.$notify.error({
          title: '失败',
          message: "获取报警记录信息失败"
        })
      })
    },
    misstateFire(){
      this.$confirm('管理员你好，你确定本次上报为误报火情吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        misstateFire(this.alarmRecordInfo).then(res=>{
          this.getInAlarmRecordVo(this.$route.params.ucId)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消成功'
        });
      });
    },
    //获取本企业的区域信息
    getRegionList(){
      getRegionList({}).then(res=>{
        this.regionList = res.data
      })
    },
    confirmFire(){
      this.$confirm('管理员你好，你是否确认本次火情,确认将给所有人发送火情通知?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmFire(this.fireForm).then(res=>{
          this.$notify.success({
            title: '成功',
            message: "确认火情并发布消息成功"
          })
          this.dialogVisible = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消成功'
        });
      });
    }

  }

}
</script>
